<template>
  <div>
    <el-menu
      default-active="/"
      background-color="#202127"
      text-color="white"
      mode="horizontal"
      @select="handleSelect"
      class="my_menu"
    >
      <el-menu-item index="/">UPPER DU</el-menu-item>
      <el-menu-item index="/fltctl">FLT CTL</el-menu-item>
      <el-menu-item index="/fuel">FUEL</el-menu-item>
      <el-menu-item index="/elec">ELEC</el-menu-item>
      <el-menu-item index="/hyd">HYD</el-menu-item>
      <el-menu-item index="/air">AIR</el-menu-item>
    </el-menu>
    <router-view />
    <div
      class="overlay"
      :style="{ top: `${position.top}px`, left: `${position.left}px` }"
      @mousedown="onMouseDown"
    >
      <Tips ref="tipsRef" :toRight="toRight" :toBottom="toBottom" :message="message" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Tips from './components/other/Tips.vue'

const leftMargin = ref(591)
const bottomMargin = ref(591)
const tipsRef = ref(null)

const toBottom = ref(false)
const toRight = ref(false)
const message = ref(
  '快捷键：\nF1：启动\nF2：减速\nF3：加速\nF4：最大推力\nF5：襟翼全收\nF6：收襟翼\nF7：放襟翼\nF8：襟翼全放\nF9：关车\nG：收放起落架'
)

onMounted(() => {
  router.push('/air')
})

const position = reactive({
  top: 50, // 初始 Y 坐标
  left: 570 // 初始 X 坐标
})
const dragging = ref(false) //存储拖动状态
const offset = reactive({ x: 0, y: 0 }) // 鼠标点击时的起始位置
const router = useRouter()
const handleSelect = (key) => {
  message.value =
    '快捷键：\n←：左滚转\n→：右滚转\n↑：飞机抬头\n↓：飞机低头\nA：左偏航\nD：右偏航\nQ：安定面前缘向下\nE：安定面前缘向上\nZ：方向舵配平\nC：方向舵配平'
  if (key == '/fltctl') {
  } else if (key == '/') {
    message.value =
      '快捷键：\nF1：启动\nF2：减速\nF3：加速\nF4：最大推力\nF5：襟翼全收\nF6：收襟翼\nF7：放襟翼\nF8：襟翼全放\nF9：关车\nG：收放起落架'
  } else if (key == '/fuel') {
    message.value =
      '快捷键：\nQ：设置前交输活门\nW：设置后交输活门\nE：设置中央油箱左泵\nR：设置中央油箱右泵\nA：设置左油箱前泵\nS：设置左油箱后泵\nD：设置右油箱前泵\nF：设置右油箱后泵'
  } else if (key == '/elec') {
    message.value =
      '快捷键：\nQ：设置左BUS TIE\nW：设置右BUS TIE\nE：设置厨房/通用汇流条\nR：设置左发电机\nT：设置右发电机\nA：设置APU发电机\nS：设置左备用发电机\nD：设置右备用发电机\nF：设置次级地面电源\nG：设置主级地面电源'
  } else if (key == '/hyd') {
    message.value = '快捷键：\n鼠标点击进行设置'
  } else if (key == '/air') {
    message.value = '快捷键：\n鼠标点击进行设置'
  }
  router.push(key)
}

const extractNumber = (str) => {
  // 将字符串按换行符分割成数组
  const lines = str.split('\n')

  // 初始化一个变量来存储最大长度
  let maxLength = 0

  // 遍历每一行
  for (let line of lines) {
    // 计算当前行的长度
    const lineLength = line.length

    // 更新最大长度
    if (lineLength > maxLength) {
      maxLength = lineLength
    }
  }

  // 返回最长行的长度
  return maxLength
}

const extractLines = (str) => {
  // 将字符串按换行符分割成数组
  const lines = str.split('\n')
  return lines.length
}

const onMouseDown = (event) => {
  // 阻止默认行为，防止选中文本或其他副作用
  event.preventDefault()
  // 标记为正在拖动
  dragging.value = true

  // 记录鼠标相对元素的初始位置
  offset.x = event.clientX - position.left
  offset.y = event.clientY - position.top

  // 添加鼠标移动和鼠标松开事件监听
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
}

const onMouseMove = (event) => {
  if (dragging.value) {
    if (
      event.clientX >= 20 &&
      event.clientX <= 620 &&
      event.clientY >= 20 &&
      event.clientY <= 560
    ) {
      position.left = event.clientX - offset.x
      position.top = event.clientY - offset.y
      if (event.clientX < extractNumber(message.value) * 18) {
        tipsRef.value.setToRight()
      } else {
        tipsRef.value.setToLeft()
      }
      if (event.clientY > extractLines(message.value) * 30) {
        tipsRef.value.setToUpper(extractNumber(message.value))
      } else {
        tipsRef.value.setToBottom(extractNumber(message.value))
      }
    }
  }
}

const onMouseUp = (event) => {
  dragging.value = false
  // 移除事件监听
  document.removeEventListener('mousemove', onMouseMove)
  document.removeEventListener('mouseup', onMouseUp)
}
</script>

<style scoped>
.my_menu {
  width: 100%;
}
.overlay {
  position: absolute;
  right: 0;
  padding: 20px;
  z-index: 10; /* 确保它覆盖在 router-view 上方 */
}
</style>
